<template>
  <div>
    <!--表格栏-->
    <el-table :data="data.content" border stripe highlight-current-row @selection-change="selectionChange"
              :row-key="rowKey"
              :lazy="lazy" :tree-props="treeProps" :load="loadChildren"
              :v-loading="loading" :max-height="maxHeight" :size="size" :align="align" style="width:100%;">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column v-for="column in columns"
                       :align="align || 'center'"
                       :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth"
                       :sortable="column.sortable" :fixed="column.fixed" :key="column.prop" :type="column.type">
        <template slot-scope="scope">
          <span v-if="column.render" :render="column.render"></span>
          <table-slot v-if="column.render" :scope="scope"
                      :text="scope.row[column.prop]"
                      :render="column.render"></table-slot>
          <span v-else>{{scope.row[column.prop]}}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="tableOperation.operation || tableOperation.render"
        :fixed="tableOperation.fixed"
        label="操作"
        :align="align || 'center'"
        :width="tableOperation.operateColumnWidth || 230">
        <template slot-scope="scope">
          <table-slot
            v-if="tableOperation.render"
            :scope="scope"
            :text="scope.row"
            :render="tableOperation.render"
          ></table-slot>
          <el-button
            v-else
            v-for="(item, index) in tableOperation.operation"
            @click="handleClick(scope.row, item.type, scope.$index)"
            :key="index"
            :size="item.size || 'mini'"
            :style="{color: item.color|| ''}"
            :icon="item.icon"
            type="text">{{item.name}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <!--      <vue-button label="批量删除" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()"-->
      <!--                  :disabled="this.selections.length===0" style="float:left;"/>-->
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
                     :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="data.totalSize"
                     style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import vueButton from "../vueButton"
  import tableSlot from "./tableSlot";
  import {menuApi} from "../../http/modules/menu";

  export default {
    name: 'vTable',
    components: {
      vueButton,
      tableSlot
    },
    props: {
      size: { // 尺寸样式
        type: String,
        default: 'mini'
      },
      align: {  // 文本对齐方式
        type: String,
        default: 'center'
      },
      maxHeight: {  // 表格最大高度
        type: Number,
        default: 450
      },
      columns: Array, // 表格列配置
      /** 表格操作配置 */
      tableOperation: {
        /** 操作 */
        fixed: {
          type: Boolean,
          default: false
        },
        operation: {
          type: Array,
          default: [], // [{name: '查看'}]
        },
        operateColumnWidth: {
          type: Number
        }
      },
      data: {
        type: Object,
        default: {}
      }, // 表格分页数据
      permsView: String, // 查看权限标识
      permsEdit: String,  // 编辑权限标识
      permsDelete: String,  // 删除权限标识
      lazy: {
        type: Boolean,
        default: true
      },
      treeProps: {
        type: Object,
        default: { hasChildren: 'hasChildren', children: 'children' }
      },
      rowKey: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        loading: true,  // 加载标识
        selections: []  // 列表选中列
      }
    },
    methods: {
      handleClick(row, type, index) {
        this.$emit('handleClick', row, type, index)
      },
      // 分页查询
      findPage() {
        this.$emit('findPage', this.pageRequest)
      },
      // 选择切换
      selectionChange(selections) {
        this.selections = selections
        this.$emit('selectionChange', selections)
      },
      // 换页刷新
      refreshPageRequest(pageNum) {
        this.pageRequest.pageNum = pageNum
        this.findPage()
      },
      // 查看
      handleView(index, row) {
        this.$emit('handleView', index, row)
      },
      // 编辑
      handleEdit(index, row) {
        this.$emit('handleEdit', {index: index, row: row})
      },
      // 删除
      handleDelete(index, row) {
        let rows = []
        rows.push(row)
        this.delete(rows)
      },
      // 批量删除
      handleBatchDelete() {
        this.delete(this.selections)
      },
      // 删除操作
      delete(rows) {
        this.$emit('handleDelete', rows)
      },
      loadChildren(row, treeNode, resolve) {
        this.$emit('loadChildren',  row, resolve)
      },
    },
    mounted() {
      this.refreshPageRequest(1)
    }
  }
</script>

<style scoped>

</style>
